<template>
  <div class="login">
    <!-- 页头 -->
    <div class="header">
      <div class="top">
        <div class="logo"></div>
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="container">
      <div class="login-box">
        <form>
          <div class="txt">
            <p>注册</p>
            <div class="text">
              <input
                type="text"
                placeholder="请输入手机号"
                name="phone"
                required
                autofocus
                v-model="phone"
                @input="checkPhone"
              />
              <input
                type="password"
                placeholder="请输入密码"
                name="upwd"
                required
                autofocus
                v-model="upwd"
                oncopy="return false"
                onpaste="return false"
                oncut="return false"
                @input="checkUpwd"
              />
              <input
                class="enter"
                type="password"
                placeholder="确认密码"
                name="repwd"
                required
                autofocus
                v-model="repwd"
                oncopy="return false"
                onpaste="return false"
                oncut="return false"
                @input="checkRepwd"
              />
              <div class="yz">
                <input
                  class="yzm"
                  type="text"
                  placeholder="请输入短信验证码"
                  name="idCode"
                  required
                  autofocus
                  v-model="idCode"
                  @input="checkidCode"
                />
                <span class="zm">
                  <div>获取验证码</div>
                </span>
              </div>
              <p>{{ tip }}</p>
            </div>
            <div
              :class="{ active: phone || upwd || repwd || idCode != '' }"
              @click="register"
            >
              <span>注册</span>
            </div>
            <div class="login-text">
              <span>
                <router-link to="/register">没有账号?</router-link>
                <router-link to="/register">点击注册</router-link>
                |
                <router-link to="/wang">忘记密码</router-link>
              </span>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!-- 页尾 -->
    <div class="footer">
      <div>
        <p>链家网（北京）科技有限公司 | 网络经营许可证 京ICP备16057509号-2</p>
        <p>© Copyright©2010-2022 链家网<span>Lianjia.com</span>版权所有</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      upwd: "",
      repwd: "",
      idCode: "",
      tip: "",
    };
  },
  methods: {
    checkPhone() {
      if (!/^[1]([3-9])[0-9]{9}$/.test(this.phone)) {
        this.tip = "请输入正确的手机号";
        return false;
      } else {
        this.tip = "";
        return true;
      }
    },
    checkUpwd() {
      if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/.test(this.upwd)) {
        this.tip = "密码长度8-20位，需包含字母+数字";
        return false;
      } else {
        this.tip = "";
        return true;
      }
    },
    checkRepwd() {
      if (this.repwd != this.upwd) {
        this.tip = "两次密码输入不一致";
      } else {
        this.tip = "";
        return true;
      }
    },
    checkidCode() {
      if (!/^\d{6}$/.test(this.idCode)) {
        this.tip = "验证码必须为六位数字";
        return false;
      } else {
        this.tip = "";
        return true;
      }
    },
    register() {
      if (
        this.checkPhone() &&
        this.checkUpwd() &&
        this.checkRepwd() &&
        this.checkidCode()
      ) {
        console.log(this.phone, this.upwd, this.repwd, this.idCode);
        const url = "/register";
        const params = `phone=${this.phone}&upwd=${this.upwd}&repwd=${this.repwd}&idCode=${this.idCode}`;
        this.axios.post(url, params).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            alert("恭喜! 注册成功. 即将跳转到登录页");
            this.$router.push("/login");
          } else {
            alert("手机号已存在");
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  padding: 10px 30px;
  height: 60px;
  .top {
    height: 20px;
    margin: 0 auto;
    .logo {
      width: 40px;
      height: 40px;
      background-image: url("../assets/img/login_logo.jpg");
      background-size: 100%;
    }
  }
}
.container {
  width: 100%;
  margin: 0px auto;
  height: 700px;
  background-image: url("../assets/img/login_bg.jpg");
  background-size: 100% 100%;
  position: relative;
  .login-box {
    width: 380px;
    height: 460px;
    position: absolute;
    top: 120px;
    right: 120px;
    border-radius: 10px;
    background-color: white;
    box-sizing: border-box;
    .txt {
      height: 100%;
      > p {
        font-size: 18px;
        width: 40px;
        margin-top: 50px;
        margin-left: 165px;
        height: 100%;
      }
      .text {
        width: 80%;
        margin-top: 40px;
        margin-left: 35px;
        height: 200px;
        input {
          width: 100%;
          outline: none;
          padding: 10px 10px;
          border: 1px solid #ddd;
          height: 42px;
          border-bottom: 0;
        }
        .enter {
          border-bottom: 1px solid #ddd;
        }
        .yz {
          width: 100%;
          height: 42px;
          display: inline-flex;
          input {
            width: 70%;
            height: 42px;
            border: 1px solid #ddd;
          }
          .yzm {
            border-right: 0;
          }
          span {
            height: 42px;
            width: 30%;
            border: 1px solid #ddd;
            div {
              width: 100%;
              height: 20px;
              padding-left: 15px;
              margin-top: 10px;
              border-left: 1px solid #ddd;
              color: #178bf8;
            }
            div:hover {
              cursor: pointer;
            }
          }
          .zm {
            border-left: 0;
          }
        }
        > p {
          text-align: center;
          margin-top: 10px;
          color: red;
        }
      }
      div:nth-child(3) {
        width: 80%;
        margin-top: 10px;
        margin-left: 35px;
        opacity: 0.4;
        span {
          display: block;
          background-color: #0984f9;
          text-align: center;
          padding: 10px 20px;
          width: 100%;
          border-radius: 4px;
          border: 0;
          color: white;
          font-size: 1rem;
          cursor: not-allowed;
        }
      }
      div:nth-child(3).active {
        pointer-events: auto;
        opacity: 1;
        span {
          cursor: pointer;
        }
      }
      .login-text {
        margin-top: 35px;
        width: 100%;
        height: 20px;
        border-top: 1px solid #ddd;
        > span {
          display: block;
          width: 180px;
          margin-top: 20px;
          margin-left: 40%;
          a {
            color: blue;
            font-size: 1rem;
            padding: 3px;
            text-decoration: none;
            &:hover {
              opacity: 0.7;
            }
          }
        }
      }
    }
  }
}
.footer {
  height: 100px;
  > div {
    width: 30%;
    text-align: center;
    margin: 10px auto;
    p {
      color: #ddd;
      font-size: 1.2rem;
    }
    p:last-child {
      text-align: center;
      > span {
        color: #0993fb;
      }
    }
  }
}
</style>
